<template>
	<el-dialog
		append-to-body
		:visible.sync="dialogVisible"
		:title="config.title"
		:width="config.width"
		:modal="config.modal"
		:close-on-click-modal="config.closeOnClickModal"
		:before-close="resetForm"
	>
		<el-form
			:model="ruleForm"
			:rules="rules"
			ref="ruleForm"
			label-width="100px"
		>
			<div v-for="(item, index) in dialogForm" :key="index">
				<slot :name="item.key" :disabled="disabledAll">
					<el-form-item
						v-if="
							item.type === 'text' ||
							item.type === 'textarea' ||
							item.type === 'password' ||
							item.type === 'number'
						"
						:label="item.label"
						:prop="item.key"
					>
						<el-input
							:type="item.type"
							:disabled="disabledAll"
							:autosize="true"
							v-model.trim="ruleForm[item.key]"
							:placeholder="item.placeholder"
							:maxlength="item.maxlength"
							clearable
						></el-input>
					</el-form-item>
					<el-form-item
						v-if="item.type === 'radio'"
						:label="item.label"
						:prop="item.key"
					>
						<el-radio-group
							v-model="ruleForm[item.key]"
							:disabled="disabledAll"
						>
							<el-radio
								v-for="item in item.options"
								:key="item.value"
								:label="item.value"
								:value="item.value"
								>{{ item.label }}</el-radio
							>
						</el-radio-group>
					</el-form-item>
					<el-form-item
						v-if="item.type === 'checkbox'"
						:label="item.label"
						:prop="item.key"
					>
						<el-checkbox-group
							v-model="ruleForm[item.key]"
							:disabled="disabledAll"
						>
							<el-checkbox
								v-for="citem in item.options"
								:key="citem.value"
								:label="citem.value"
								:name="item.key"
								>{{ citem.label }}</el-checkbox
							>
						</el-checkbox-group>
					</el-form-item>
					<el-form-item
						v-else-if="item.type === 'select'"
						:label="item.label"
						:prop="item.key"
					>
						<el-select
							:disabled="disabledAll"
							v-model.trim="ruleForm[item.key]"
							:placeholder="item.placeholder"
							clearable
						>
							<el-option
								v-for="item in item.options"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							>
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item
						v-else-if="item.type === 'date'"
						:label="item.label"
						:prop="item.key"
					>
						<el-date-picker
							:disabled="disabledAll"
							v-model.trim="ruleForm[item.key]"
							type="date"
							format="yyyy-MM-dd"
							value-format="yyyy-MM-dd"
							:placeholder="item.placeholder"
						>
						</el-date-picker>
					</el-form-item>
					<el-form-item
						v-else-if="item.type === 'daterange'"
						:label="item.label"
						:prop="item.key"
					>
						<el-date-picker
							:disabled="disabledAll"
							v-model.trim="ruleForm[item.key]"
							type="daterange"
							format="yyyy-MM-dd"
							value-format="yyyy-MM-dd"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
						>
						</el-date-picker>
					</el-form-item>
				</slot>
			</div>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button v-if="config.isLeftBut" @click="resetForm()">{{
				config.leftButText
			}}</el-button>
			<el-button
				type="primary"
				v-if="config.isRightBut"
				:loading="loading"
				@click="submitForm()"
				>{{ config.rightButText }}</el-button
			>
		</div>
	</el-dialog>
</template>
<script>
export default {
	data () {
		return {
			dialogForm : [],
			ruleForm : {}, // model数据
			rules : {}, // 验证规则
			disabledAll : false, // 是否禁用
			handlerFn : null, // 提交的执行函数,由外部传递
			loading : false, // 按钮loading
			config : {
				// dialog 配置
				title : '提示',
				modal : true,
				width : '40%',
				closeOnClickModal : true,
				isLeftBut : true,
				isRightBut : true,
				leftButText : '取 消',
				rightButText : '确 定'
			},
			dialogVisible : false
		};
	},
	methods : {
		open ({ config, dialogForm, handlerFn, disabledAll, result = {} }) {
			this.dialogVisible = true;
			this.config = { ...this.config, ...config };
			this.disabledAll = disabledAll;
			this.initForm(dialogForm, result);
			this.handlerFn = handlerFn;
		},
		initForm (dialogForm, result) {
			this.dialogForm = dialogForm;
			dialogForm.forEach(item => {
				let v = result[item.key] === undefined ? '' : result[item.key];
				if (item.type === 'checkbox') {
					this.$set(this.ruleForm, item.key, v === '' ? [] : [...v]);
				} else {
					this.$set(this.ruleForm, item.key, v);
				}
				this.$set(this.rules, item.key, item.rules);
			});
		},
		submitForm () {
			this.$refs.ruleForm.validate(valid => {
				if (valid) {
					let parameMap = {};
					Object.keys(this.ruleForm).forEach(key => {
						parameMap[key] = this.ruleForm[key];
					});
					this.loading = true;
					this.handlerFn(parameMap, (isError) => {
						if (isError){
							this.loading = false;
						} else {
							this.loading = false;
							this.resetForm();
						}

					});
				}
			});
		},
		resetForm () {
			this.$refs.ruleForm.resetFields();
			this.dialogForm = [];
			this.ruleForm = {}; // model数据
			this.rules = {}; // 验证规则
			this.dialogVisible = false;
		}
	}
};
</script>
<style lang="scss" scoped>
.el-input,
.el-select,
.el-range-editor.el-input__inner {
	width: 100%;
}
</style>
